<template>
    <div class="customer">
        <h2>客户分析</h2>
        <div class="head">
            <ul class="clearfix">
                <li v-for="(item,index) in items" 
                :class="{active:curitem==index}" 
                @click="switchpage(index);switch_view_customer(item.currentView)"
                >{{item.label}}</li>
            </ul>
        </div>
        <div class="body">
            <component :is="currentView"></component>
        </div>
    </div>
</template>
<script>
    import customer_add from './components/customer_add'
    import customer_attr from './components/customer_attr'
    import {mapState,mapGetters} from 'vuex'
    export default {
        name:'customer',
        components:{customer_add,customer_attr},
        data (){
            return {
                curitem:0,
                items:[
                    {
                        label:'客户增长',
                        currentView:'customer_add'
                    },
                    {
                        label:'客户属性',
                        currentView:'customer_attr'
                    }
                ]
            }
        },
        methods:{
            switchpage(index){
                this.curitem = index;
            },
            switch_view_customer(currentView){
                this.$store.dispatch('switch_view_customer',{currentView})
            }
        },
        computed:{
            ...mapState({
                currentView:state=>state.customer.currentView
            })
        }
    }
</script>
<style scoped>
    .customer{padding:20px;height:100%}
    h2{font-size:0.16rem;}
    .head{width:100%;height:0.4rem;margin-top:0.2rem;}
    .head ul li{width:1rem;height:0.4rem;float:left;text-align:center;line-height:0.4rem;cursor:pointer;}
    .active{border-bottom:2px solid blue;}
</style>

